<template>
  <div class="project-team" style="height: 100%">
<!--    <el-card style="height: 100%"></el-card>-->
    <vxe-grid ref="xGrid"
              id="modulepage"
              v-bind="gridOptions"
              :data="tableData"
              style="height: calc(100vh - 140px)"
              height="auto"
              @page-change="pageChange">
      <template v-slot:buttons>
        <div style="float: right;margin-right: 12px;">
          <el-button icon="el-icon-circle-plus" size="medium" title="新增模块" circle @click="create" v-if="isShowBtn('module-add')"></el-button>
        </div>
      </template>
      <!-- 操作栏 -->
      <template v-slot:operate="scope">
        <vxe-button status="primary" @click="editTable(scope.row)" size="small" v-if="isShowBtn('module-edit')">编辑</vxe-button>
        <!--          <el-dropdown @command="handleOperateCommand($event, scope.row)">-->
        <!--            <el-button type="info">-->
        <!--              <i class="el-icon-setting"/><i class="el-icon-arrow-down el-icon&#45;&#45;right"></i>-->
        <!--            </el-button>-->
        <!--            <el-dropdown-menu slot="dropdown">-->
        <!--              <el-dropdown-item :command="-1"> <i class="el-icon-edit"/></el-dropdown-item>-->
        <!--              <el-dropdown-item :command="0" divided> <i class="el-icon-delete"/></el-dropdown-item>-->
        <!--            </el-dropdown-menu>-->
        <!--          </el-dropdown>-->
      </template>
    </vxe-grid>
    <!-- 弹窗-新增需求 -->
    <module-add :visible.sync="modalVisible" :title="title" :formData="formData" :editModel="editModel" @search="getDataList"></module-add>
  </div>
</template>

<script>
  import { formatDateString } from '@/utils/date';
  import projectModuleApi from '@/api/projectModuleApi';
  import { mapGetters } from 'vuex';
  import ModuleAdd from './ModuleAdd';
  export default {
    computed: {
      ...mapGetters(['dictionary'])
    },
    components: {
      ModuleAdd
    },
    data () {
      return {
        editModel: '',
        title: '',
        formData: {},
        tableData: [],
        modalVisible: false,
        gridOptions: {
          border: true,
          resizable: true,
          showHeaderOverflow: true,
          showOverflow: true,
          highlightHoverRow: true,
          keepSource: true,
          rowId: 'id',
          customConfig: {
            storage: true
          },
          sortConfig: {
            trigger: 'cell'
          },
          toolbar: {
            slots: {
              buttons: 'toolbar-buttons'
            },
            refresh: {query: this.getDataList},
            export: true,
            print: true,
            zoom: true,
            custom: true
          },
          pagerConfig: {
            currentPage: 1,
            pageSize: 15,
            pageSizes: [5, 10, 15, 20, 50, 100, 200, 500, 1000],
            total:0
          },
          columns: [
            {
              field: 'Name',
              title: '名称',
              sortable: true,
              align: 'center',
              resizable: false
            },
            {
              field: 'Projectname',
              title: '项目',
              sortable: true,
              align: 'center',
              resizable: false
            },
            {
              field: 'Aliasname',
              title: '模块代号',
              sortable: true,
              align: 'center',
              resizable: false
            },
            {
              field: 'Userrealname',
              title: '创建人',
              sortable: true,
              align: 'center',
              resizable: false
            },
            {
              field: 'Projuserrealname',
              title: '负责人',
              sortable: true,
              align: 'center',
              resizable: false
            },
            {
              title: '操作',
              align: 'center',
              width: '150px',
              resizable: false,
              slots: {
                default: 'operate'
              }
            }
          ]
        },
        queryParas: {
          p: 1,
          pageoffset: 15,
          id: this.$route.params.id || ''
        }
      }
    },
    created () {
      this.queryParas.id = this.$route.params.id
      this.getDataList();
    },
    activated() {
      this.queryParas.id = this.$route.params.id
      this.getDataList();
    },
    methods: {
      // 是否显示按钮
      isShowBtn (btnName) {
        return this.btnPermissionUtil.getBtnbtnPermission(btnName)
      },
      // 新增
      create () {
        this.formData = {
          Id: '',
          Projectid: this.$route.params.id,
          Name: '',
          Aliasname: '',
          desc: '',
          Projuserid: ''
        }
        this.editModel = 'C'
        this.modalVisible = true
      },
      // 编辑
      editTable (row) {
        console.log(row)
        this.formData = JSON.parse(JSON.stringify(row))
        this.formData.Projuserid = this.formData.Projuserid + ''
        this.editModel = 'E'
        this.modalVisible = true
      },
      getDataList () {
        if (this.queryParas) {
          projectModuleApi.getPage(this.queryParas).then(({Modules, Total}) => {
            if (Modules) {
              this.tableData = Modules;
              this.gridOptions.pagerConfig.total = Total;
            }
          });
        }
      },
      handleOperateCommand (command, row) {
        if (command === -1) {
          this.editItem = row;
          this.editVisible = true;
        } else {
          if (this.$refs.xGrid.getUpdateRecords().length > 0) {
            this.$message.warning('请先保存已修改的数据');
            return
          }
        }
      },
      reload () {
        this.$refs.xGrid.commitProxy('reload');
      },
      pageChange ({ currentPage, pageSize }) {
        this.gridOptions.pagerConfig.currentPage = currentPage
        this.gridOptions.pagerConfig.pageSize = pageSize
        this.queryParas.p = currentPage
        this.queryParas.pageoffset = pageSize
        this.getDataList()
      }
    },
    filters: {
      formatDateTime (val) {
        return formatDateString(val * 1000, 'yyyy-MM-dd hh:mm:ss')
      }
    }
  }
</script>

<style lang="scss" scoped>
  .link-name {
    color: #65CEA7;
  }

  .link-name:hover {
    color: #353F4F;
    text-decoration: underline;
  }
</style>
